import React from 'react';
import { connect } from 'umi';
import { Form, Input, Button } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { phoneReg } from '@/common/regular';
import { useState } from 'react';
const App = ({ loading, dispatch, handle }) => {
  const [form] = Form.useForm();
  const [timeRule, setTimeRule] = useState({ visible: true, num: null });
  const { visible, num } = timeRule;
  const handleLogin = () => {
    form.validateFields().then((val) => {
      dispatch({
        type: 'login/fakeLoginByVerification',
        payload: {
          ...val,
        },
        callback: (e) => {
          handle(e);
        },
      });
    });
  };
  const handleSmsCode = () => {
    form.validateFields(['mobile']).then((val) => {
      dispatch({
        type: 'login/fakeSendSmsCodeBack',
        payload: {
          ...val,
          smsType: 'organizationAdminLogin',
        },
        callback: () => {
          if (!visible) {
            return;
          }
          let time = 0;
          let timeInterface = setInterval(() => {
            time += 1;
            if (time >= 60) {
              setTimeRule({ visible: true, num: 60 });
              clearInterval(timeInterface);
            } else {
              setTimeRule({ visible: false, num: 60 - time });
            }
          }, 1000);
        },
      });
    });
  };
  return (
    <div style={{ marginTop: 24 }}>
      <Form form={form} name="horizontal_login" layout="inline">
        <Form.Item
          name="mobile"
          className="formInput_box"
          rules={[
            {
              required: true,
              message: '请输入手机',
            },
            { pattern: phoneReg, message: '请输入正确的手机' },
          ]}
        >
          <Input className="login-input-height " placeholder="手机" />
        </Form.Item>
        <div className="formInput_box">
          <Form.Item
            name="smsCode"
            className="formInput_box"
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
            ]}
          >
            <Input className="login-input-height " placeholder="验证码" />
          </Form.Item>
          <div
            onClick={handleSmsCode}
            className={`code-button ${!visible ? 'code-button-opcity' : null}`}
          >
            {visible ? '获取验证码' : `获取验证码(${num})`}
          </div>
        </div>
      </Form>
      <Button onClick={handleLogin} loading={loading} type="primary" className="big-button">
        登录
      </Button>
    </div>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.login,
}))(App);
